<div *ngIf="isLoaded == false" class="loader">
    <div class="spinner-border text-light" role="status">
        <span class="sr-only mx-auto">Loading...</span>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-10 text-center bg-dark p-4 my-2">
        <h6 class="smallFont" [innerHTML]="'CARD-CALCULATOR.INFO' | translate"></h6>
    </div>
</div>
<div class="row justify-content-center pt-2">
    <div class="col-12 row justify-content-end m-2">
        <a routerLink="/card-calculator" (click)="clearAllSavedData()">
            <img class="img-fluid" src="assets/images/btn_delete.png">
        </a>
        <div class="bg-dark px-3 pt-2 ml-2 text-center">
            <h4>{{'CARD-CALCULATOR.POWER' | translate}} {{totalPower}}</h4>
        </div>
    </div>
    <div class="col-12 row justify-content-around">
        <div class="col-11 col-md-9 col-lg-4 bg-dark my-2 p-2 text-center" id="skill-summary">
            <div class="col border-bottom border-secondary">
                <h5 class="font-weight-bold">{{'CARD-CALCULATOR.SKILL-SUMMARY' | translate}}</h5>
            </div>
            <div class="mt-2">
                <h5>{{'CARD-CALCULATOR.SECOND-SKILL' | translate}}</h5>
                <div class="border-bottom border-secondary mb-2">
                    <div class="row justify-content-center">
                        <div *ngFor="let s of secondSkills" class="col-3">
                            <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                                <img class="img-fluid icon" src="{{imgURL + '/技能/' + s.ref + '.webp'}}">
                            </a>
                            <p class="smallFont">{{s.name}}<br />{{s.num}}{{s.numType}}</p>
                        </div>
                    </div>
                </div>
                <h5>{{'CARD-CALCULATOR.THIRD-SKILL' | translate}}</h5>
                <div class="row justify-content-center">
                    <div *ngFor="let s of thirdSkills" class="col-3">
                        <a [routerLink]="['/skill/']" [queryParams]="{id: s._id}" target="_blank">
                            <img class="img-fluid icon" src="{{imgURL + '/技能/' + s.ref + '.webp'}}">
                        </a>
                        <p class="smallFont">{{s.name}}<br />{{s.num}}{{s.numType}}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-10 col-lg-7 row justify-content-around">
            <div class="col-4 col-xl-3 my-2 row justify-content-center" *ngFor="let i of userData">
                <div class="col-12">
                    <a [routerLink]="['/card-value/']" [queryParams]="{id: i._id}">
                        <img class="img-fluid calculatorIcon" src="{{imgURL + i.charName + '/' + i.ref + '.webp'}}">
                    </a>
                </div>
                <!-- <div class="col-12 row">
                    <div class="col-12">
                        <img class="img-fluid icon" src="{{imgURL + '/技能/' + i.skillRefs[1] + '.webp'}}">    
                    </div>
                    <div class="col-12">
                        
                    </div>
                </div> -->
            </div>
            <div class="col-4 col-xl-3 my-2" *ngFor="let i of emptyHolder">
                <a routerLink="/card-selection">
                    <img class="img-fluid calculatorIcon" src="assets/images/boxgacha_icon_frame_1.png">
                </a>
            </div>
        </div>
    </div>
</div>